<template>
  <div>
    <div id="qrcode" ref="qrCode"></div>
    <el-button size="mini" type="primary" @click="creatQrcode">生成二维码</el-button>
  </div>

</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  data() {
    return {
      qrcode:null,
      content:'http://www.baidu.com', //二维码内容
      desc:'我是初始化底部文字内容', // 二维码底部文字描述
    }
  },
  mounted() {
    this.generatorQrcode(this.content, this.desc, this.$refs.qrCode);
  },
  methods: {
    // 生成二维码
    creatQrcode(){
      this.content = 'http://192.168.99.75:8082/h5/pages/login/index/?groupId=1696358489204572161&type=5&title=2023年玄武区sdfadsfa老年人预防跌倒小组基线问卷';
      this.desc = '2023年玄武区sdfadsfa老年人预防跌倒小组基线问卷2023年玄武区sdfadsfa老年人预防跌倒小组基线问卷2023年玄武区sdfadsfa老年人预防跌倒小组基线问卷2023年玄武区sdfadsfa老年人预防跌倒小组基线问卷2023年玄武区sdfadsfa老年人预防跌倒小组基线问卷';
      this.generatorQrcode(this.content, this.desc, this.$refs.qrCode);
    },
    generatorQrcode (content, desc, qrcodeDom = null) {
      const qrcodeContent = qrcodeDom || document.createElement('div')
      qrcodeContent.width = '400px'
      qrcodeContent.height = '400px'
      // 先清除二维码再重新生成
      if(this.qrcode){
        this.$refs.qrCode.innerHTML = ''
      }
      this.qrcode = new QRCode(qrcodeContent, {
        text: content, // 需要转换为二维码的内容
        width: 400,
        height: 400,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      var resolutionMultiple = 1 // 分辨率倍数
      var borderSize = 20 * resolutionMultiple // 边框留白
      var canvasWidth = 400 * resolutionMultiple // 图片宽度
      // 判断 参数为空的命名情况
      var text = desc || ''// 底部文字
      var fontSize = 16 * resolutionMultiple // 文字大小

      var canvasHeight = canvasWidth + fontSize * 5
      var canvas = document.createElement('canvas')
      if (!canvas.getContext) return
      canvas.width = canvasWidth
      canvas.height = canvasHeight

      var ctx = canvas.getContext('2d')
      ctx.fillStyle = 'rgb(255,255,255)' // 调色(纯白)
      ctx.fillRect(0, 0, canvasWidth, canvasHeight) // 绘制背景

      var qrcodeSize = canvasWidth - borderSize * 2
      ctx.drawImage(
          qrcodeContent.querySelector('canvas'),
          borderSize,
          borderSize,
          qrcodeSize,
          qrcodeSize
      ) // 填充二维码
      ctx.fill() // 填充背景
      ctx.fillStyle = 'rgb(0,0,0)' // 调色(纯黑)
      ctx.font = fontSize + 'px Arial' // 文本大小, 字体
      ctx.textAlign = 'center'
      //处理文字描述太长换行问题
      ctx = this.drawText(ctx, text, canvasWidth / 2, qrcodeSize + borderSize, qrcodeSize)
      // ctx.fillText(
      //   text,
      //   canvasWidth / 2,
      //   qrcodeSize + borderSize,
      //   qrcodeSize
      // ) // 绘制文本
      // 清除原二维码
      // qrcodeCanvas.clear()
      qrcodeContent.appendChild(canvas)
      Array.from(qrcodeContent.querySelectorAll('img')).forEach((item) => {
        // item.style.display = 'none'
        item.remove()
        // console.log('img', item)
      })
      return qrcodeContent
    },
    drawText (ctx, desc, x, y, w, space = 18) {
      // ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度 space字体行高
      const chr = desc
      let temp = ''
      const row = []

      for (let a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < w && ctx.measureText(temp + (chr[a])).width <= w) {
          temp += chr[a]
        } else {
          row.push(temp)
          temp = chr[a]
        }
      }
      row.push(temp)
      for (let b = 0; b < row.length; b++) {
        ctx.fillText(row[b], x, y + (b + 1) * space)// 每行字体y坐标间隔20
      }
      return ctx
    }
  }
}
</script>

<style scoped>
.qrcode {
  width: 40vw;
  height: 40vw;
  border: 1px solid #ddd;
  margin: 12.8vw 0;
}

/* {略} */
</style>
